<template>
  <div>
    <div style="background-color: #132144; padding-bottom: 60px">
      <div class="flex justify-between">
        <div
          class="back"
          style="cursor: pointer"
          @click="
            () => {
              $router.back()
            }
          "
        >
          <i class="el-icon-arrow-left" />
          {{ $route.query.appName + '(' + $route.query.version + ')' }}
        </div>
      </div>
    </div>
    <div style="position: relative; top: -80px">
      <div class="top-bar justify-between" style="margin: 32px">
        <div class="top-card relative">
          <div class="relative" style="z-index: 1">
            <div class="top-label">
              {{ $t('sysapp.updated') }}
              <el-tooltip
                class="item"
                :open-delay="500"
                effect="dark"
                :content="$t('sysapp.updated_tip')"
                placement="top-start"
              >
                <i class="el-icon-question" />
              </el-tooltip>
            </div>

            <div v-if="typeof gapNum === 'number'" class="top-num">
              {{ gapTotal - gapNum }} | {{ gapNum }}
            </div>
            <div v-else style="font-size: 32px; color: #677796">
              {{ $t('page.noData') }}
            </div>
          </div>

          <img
            class="absolute right-0 top-0 h-full"
            src="@/assets/images/dashboard/dashboard-bg1.png"
            alt=""
            srcset=""
          />
        </div>
        <div class="top-card relative">
          <div class="relative" style="z-index: 1">
            <div class="top-label">
              {{ $t('sysapp.stranded') }}
              <el-tooltip
                class="item"
                :open-delay="500"
                effect="dark"
                :content="$t('sysapp.stranded_tip')"
                placement="top-start"
                ><i class="el-icon-question" />
              </el-tooltip>
            </div>
            <div v-if="typeof perishNum === 'number'" class="top-num">
              {{ perishNum }}
            </div>
            <div v-else style="font-size: 32px; color: #677796">
              {{ $t('page.noData') }}
            </div>
          </div>
          <img
            class="absolute right-0 top-0 h-full"
            src="@/assets/images/dashboard/dashboard-bg2.png"
            alt=""
            srcset=""
          />
        </div>
      </div>

      <!-- 应用升级次数 -->
      <div class="lg-card" style="margin: 32px; margin-top: 24px">
        <div class="lg-card-title-block flex justify-between">
          <div class="lg-card-title">
            {{ $t('sysapp.update') }}
          </div>
          <div class="rect-switch self-center">
            <div
              :class="[
                'rect-switch-default',
                appSelected === 'days' ? 'rect-switch-actived' : ''
              ]"
              @click="handleAppSelect('days')"
            >
              {{ $t('dashboard.days') }}
            </div>
            <div
              :class="[
                'rect-switch-default',
                appSelected === 'months' ? 'rect-switch-actived' : ''
              ]"
              @click="handleAppSelect('months')"
            >
              {{ $t('dashboard.month') }}
            </div>
          </div>
        </div>
        <div class="flex">
          <cmd-chart ref="cmdChart" />
        </div>
      </div>
      <el-card
        shadow="never"
        style="margin: 32px"
        :body-style="{ padding: '0px' }"
        :page-size="pageSize"
        :total="totalPage"
        :current-page="pageIndex"
        @current-change="currentChangeHandle"
      >
        <el-form class="search-box" inline size="small">
          <el-form-item>
            <el-input
              v-model="devSn"
              maxlength="64"
              :placeholder="$t('sysapp.devSn')"
              size="small"
              style="width: 250px"
              clearable
              @keyup.enter.native.prevent="fetchData((pageIndex = 1))"
              @blur="() => (devSn = devSn.trim())"
              @clear="fetchData((pageIndex = 1))"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="p-1.5"
              @click="fetchData((pageIndex = 1))"
            >
              <svg-icon icon-class="search" class="text-lg" />
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-tooltip
              class="item"
              effect="dark"
              :content="$t('sysapp.export_device_info')"
              placement="top"
            >
              <el-button
                v-show="isAuth('1040000406.QUERY') && totalPage != 0"
                type="primary"
                class="p-1.5"
                :loading="btnLoading"
                @click="exportDeviceAppInfo"
              >
                <svg-icon icon-class="download" class="text-lg" />
              </el-button>
            </el-tooltip>
          </el-form-item>
        </el-form>

        <el-table
          v-loading="listLoading"
          :show-overflow-tooltip="true"
          :data="tableData"
        >
          <el-table-column
            :label="$t('sysapp.devSn')"
            prop="devSn"
            align="left"
          />

          <el-table-column
            :label="$t('appstore.application.appName')"
            align="left"
            prop="pkgName"
          >
            <template v-slot="{ row }">
              <div
                class="cursor-pointer underline"
                @click="
                  () =>
                    $router.push({
                      path: '/tms/resources/app-detail',
                      query: { packageName: row.pkgName, appName: row.appName }
                    })
                "
              >
                {{ row.appName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('sysapp.version')"
            prop="currentVersion"
            align="left"
          />
          <el-table-column
            :label="$t('common.createTime')"
            prop="creTime"
            align="center"
          >
            <template v-slot="{ row }">
              <div :title="timeFilter(row.creTime)">
                {{ dateFilter(row.creTime) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('common.install_time')"
            prop="updTime"
            align="center"
          >
            <template v-slot="{ row }">
              <div :title="timeFilter(row.updTime)">
                {{ dateFilter(row.updTime) }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import { timeFilter, dateFilter } from '@/filters'
import {
  getAppInstallInfo,
  getDeviceAppInfo,
  exportDeviceAppInfo
} from '@/api/app'
import cmdChart from './components/cmd-chart.vue'
import { isAuth } from '@/utils'

export default {
  components: {
    cmdChart
  },
  data() {
    return {
      devSn: '',
      appPackageName: this.$route.query.packageName,
      appSelected: 'days',
      version: this.$route.query.version,
      gapNum: null,
      gapTotal: null,
      perishNum: null,
      tableData: [],
      listLoading: false,
      selectedData: [],
      paginationShow: true,
      condition: '',
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0
    }
  },
  mounted() {
    this.fetchData()
    this.fetchData1()
  },
  methods: {
    isAuth,
    timeFilter,
    dateFilter,
    exportDeviceAppInfo() {
      this.btnLoading = true
      const params = {}
      if (this.appPackageName !== '') {
        params.appPackageName = this.appPackageName
      }
      if (this.version !== '') {
        params.appVersion = this.version
      }
      if (this.devSn !== '') {
        params.devSn = this.devSn
      }
      params.charactorCode = 'ADMIN'
      this.$alert(this.$t('common.export_tip'), this.$t('common.tips'), {
        showConfirmButton: false
      })

      exportDeviceAppInfo(params)
        .then((res) => {
          this.btnLoading = false
          setTimeout(() => {
            this.$msgbox.close()
          }, 3000)
          this.$store.dispatch('app/fetchTaskData')
        })
        .catch((e) => {
          this.btnLoading = false
          this.$confirmError(e)
        })
    },
    currentChangeHandle(val) {
      this.pageIndex = val
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      const params = {}
      if (this.appPackageName !== '') {
        params.appPackageName = this.appPackageName
      }
      if (this.version !== '') {
        params.appVersion = this.version
      }
      if (this.devSn !== '') {
        params.devSn = this.devSn
      }
      params.charactorCode = 'ADMIN'
      params.pageNo = this.pageIndex
      params.pageSize = this.pageSize

      getDeviceAppInfo(params)
        // getDeviceAppInfo()
        .then((res) => {
          this.listLoading = false
          this.tableData = res.data
          this.totalPage = res.rows
        })
        .catch((e) => {
          this.listLoading = false
          this.$confirmError(e)
        })
    },
    handleAppSelect(selected) {
      this.appSelected = selected
      if (selected === 'days') {
        this.$nextTick(() => {
          this.$refs.cmdChart.init({
            dateUnit: 'Day',
            dateRange: 15
          })
        })
      } else if (selected === 'months') {
        this.$nextTick(() => {
          this.$refs.cmdChart.init({
            dateUnit: 'Month',
            dateRange: 12
          })
        })
      }
    },
    fetchData1() {
      const params = {}
      params.appPackageName = this.appPackageName
      params.appVersion = this.version
      params.pageNo = this.pageIndex
      params.pageSize = this.pageSize
      getAppInstallInfo(params)
        // getDeviceAppInfo()
        .then((res) => {
          if (res != null && res.data != null && res.data.length > 0) {
            this.gapTotal = res.data[0].gapTotal
            this.gapNum = res.data[0].gapNum
            this.perishNum = res.data[0].perishNum
          }
        })
        .catch((e) => {
          this.$confirmError(e)
        })
    }
  }
}
</script>

<style lang="scss">
.terminal-list {
  .el-table .cell {
    /* height: 30px !important; */
  }
}
</style>

<style lang="scss" scoped>
.back {
  color: #ffffff;
  font-size: 20px;
  margin: 20px;
}
.lg-card {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.12),
    0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 4px 16px 4px rgba(0, 0, 0, 0.04);
  .lg-card-title-block {
    padding: 21px;
    height: 64px;
    border-bottom: #e7eaf3 solid 1px;
    .lg-card-title {
      padding-left: 2px;
      font-size: 16px;
      font-weight: bold;
      line-height: 23px;
      letter-spacing: 0px;
      color: #1a1a1a;
    }
  }
}

.rect-switch {
  height: 38px;
  width: 157px;
  border-radius: 6px;
  background: #f8fafd;
  border: 1px solid rgba(0, 0, 0, 0.03);
  padding: 3px;
  display: flex;
  .rect-switch-actived {
    background: #ffffff;
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1);
  }
  .rect-switch-default {
    cursor: pointer;
    border-radius: 5px;

    width: 77px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
    font-weight: normal;
    line-height: 30px;
    letter-spacing: 0px;
    color: #7f8d9b;
  }
}

.my-card {
  background: #ffffff;
  border: 1px solid #eef0f7;
  box-shadow: 0px 0px 21px 0px rgba(19, 33, 68, 0.08);
  border-radius: 12px;
  margin-bottom: 16px;
  .my-card-header {
    padding: 32px 24px;
    border-bottom: solid 1px #eef0f7;
    .my-card-title {
      color: #1e2022;
      font-size: 16px;
      font-weight: 600;
    }
  }

  .my-card-body {
    padding: 36px;
    padding-top: 0px;
  }
}

.top-bar {
  display: flex;
  gap: 28px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 20px;
  align-self: stretch;
  .top-card {
    flex-grow: 1;
    background-color: #fff;
    padding: 16px;
    border-radius: 4px;
    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.12),
      0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 4px 16px 4px rgba(0, 0, 0, 0.04);
    .top-label {
      font-size: 16px;
      font-weight: normal;
      line-height: 17px;
      color: #677796;
    }
    .top-num {
      margin-top: 10px;
      font-size: 32px;
      font-weight: bolder;
      line-height: 35px;
      color: #677796;
    }
    .top-count {
      margin-left: 4px;
      font-size: 16px;
      font-weight: normal;
      line-height: 23px;
      color: #767676;
    }
    .top-percent {
      background-color: #e5f9f6;
      border-radius: 3px;
      font-size: 10px;
      padding: 4px 6px 4px 6px;
      font-weight: bold;
      line-height: 14px;
      vertical-align: baseline;
      color: #08cbaa;
    }
  }
}
</style>
